<template>
  <!--招采管理-物资招采-创建/编辑物资招标信息弹窗-表单-->
  <a-spin :spinning="confirmLoading">
    <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="model" :rules="validatorRules">
      <!-- 主表单区域 -->
      <a-row class="form-row" :gutter="16">
        <a-col :lg="8">
          <a-form-model-item label="招标名称" required prop="name">
            <a-input v-model="model.name" placeholder="请输入招标名称" />
          </a-form-model-item>
        </a-col>
        <a-col :lg="8">
          <a-form-model-item label="所属项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="project">
            <a-select :options="levelOneOptions1" v-model="model.project" placeholder="请输入项目"></a-select>
          </a-form-model-item>
        </a-col>
        <a-col :lg="8">
          <a-form-model-item label="结标时间" prop="traneIncTime">
            <j-date showTime valueFormat="YYYY-MM-DD" v-model="model.traneIncTime" />
          </a-form-model-item>
        </a-col>
        <a-col :span="15" style="margin-right: -250px">
          <a-form-model-item label="技术要求(上传文件包)" prop="fileList">
            <j-upload v-model="model.technicalRequirements"></j-upload>
          </a-form-model-item>
        </a-col>
        <!-- <a-col :span="6">
          <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-button type="primary" @click="handleSupplier" icon="search" style="margin-left: 8px"
              >选择供应商</a-button
            >
          </a-form-model-item>
        </a-col> -->
      </a-row>

      <!-- 子表单区域 -->
      <a-tabs defaultActiveKey="1">
        <a-tab-pane tab="招标信息" key="1">
          <div style="display: flex;flex-direction: column;">
            <a-row :gutter="16" style="margin-bottom: 10px;">
              <a-col :span="3">一级分类</a-col>
              <a-col :span="3">二级分类</a-col>
              <a-col :span="3">三级分类</a-col>
              <a-col :span="3">物资名称</a-col>
              <a-col :span="3">规格/型号</a-col>
              <a-col :span="3">单位</a-col>
              <a-col :span="3">数量</a-col>
              <!-- <a-col :span="2">税率(%)</a-col>
              <a-col :span="2">不含税价</a-col>
              <a-col :span="2">含税价</a-col> -->
              <a-col :span="3">操作</a-col>
            </a-row>
            <block v-for="(item, index) in model.biddingMaterialsList" :key="index">
              <a-row :gutter="16" style="margin-bottom: 10px;">
                <a-col :span="3">
                 <a-select :options="levelOneOptions" v-model="item.categoryOneId" placeholder="一级分类"
                   @change="changeLevelOne" style="width: 100%;">
                 </a-select>
                </a-col>
                <a-col :span="3">
                  <a-select :options="levelTwoOptions" v-model="item.categoryTwoId" placeholder="二级分类"
                    @change="changeLevelTwo">
                  </a-select>
                </a-col>
                <a-col :span="3">
                  <a-select :options="levelThreeOptions" v-model="item.categoryThreeId" placeholder="三级分类"
                    @change="changeLevelThree">
                  </a-select>
                </a-col>
                <a-col :span="3">
                  <a-select :options="StandardList" v-model="item.platformProductId" placeholder="物资名称"
                    @change="handleCheckedCitiesChange(item.platformProductId, index)"></a-select>
                </a-col>
                <a-col :span="3">
                  <a-select :options="modelList" v-model="item.model" placeholder="规格/型号"></a-select>
                </a-col>
                <a-col :span="3">
                 <a-input v-model="item.unit" :options="unit" placeholder="单位"></a-input>
                </a-col>
                <a-col :span="3">
                   <a-input v-model="item.num" placeholder="数量"></a-input>
                </a-col>
                <a-col :span="3">
                  <div style="display: flex;justify-content: flex-start;align-items: center;">
                    <a-icon type="minus-circle" @click="delRcruit(index)" style="font-size: 20px;line-height: 32px;" />
                  </div>
                </a-col>
              </a-row>
            </block>
            
              <!-- <a-col :span="2">
                <a-form-model-item>
                  <a-input v-model="item.taxTate" placeholder="税率"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="3">
                <a-form-model-item>
                  <a-input v-model="item.Priceexcludingtax" placeholder="不含税价"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="3" style="margin-left: -60px;">
                <a-form-model-item>
                  <a-input v-model="item.Taxinclusiveprice" placeholder="含税价"></a-input>
                </a-form-model-item>
              </a-col> -->
            <a-button type="dashed" style="width: 98%; margin-top: 10px" @click="addRcruit">
              <a-icon type="plus" /> 添加招标信息
            </a-button>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-form-model>
    <!-- <Wt-Public-Price-Supplier-Modal ref="modalForm2" @ok="modalFormOk"></Wt-Public-Price-Supplier-Modal> -->
  </a-spin>
</template>

<script>
  import {
    httpAction,
    getAction
  } from '@/api/manage'
  import JDate from '@/components/jeecg/JDate'
  import {
    mixinDevice
  } from '@/utils/mixin'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  // import WtPublicPriceSupplierModal from './WtPublicBiddingPriceSupplierModal.vue'
  // import WtPublicPriceSupplierForm from './WtPublicBiddingPriceSupplierForm.vue'
  export default {
    name: 'WtPublicBiddingRecruitForm',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
      JDate,

      // MaterialSupplier,
    },
    data() {
      return {
        LevelOneList: [],
        LevelTwoList: [],
        LevelThreeList: [],
        title: '操作',
        visible: false,
        id: '',
        model: {
          biddingMaterialsList: [{
            platformProductId: '',
            num: '',
            model: '',
            unit: '',
            supplierId: '',
            categoryOneId: '',
            categoryTwoId: '',
            categoryThreeId: '',
            taxTate: '',
            Priceexcludingtax: '',
            Taxinclusiveprice: ''
          }, ],

          project: '',
          orderDate: '',
          technicalRequirements: [],
        },
        levelOneOptions: [],
        levelOneOptions1: [],
        OneVal: '',
        levelTwoOptions: [],
        levelThreeOptions: [],
        treeData: [],
        treeData1: [],
        StandardData: [],
        StandardList: [],
        modelList: [],
        modelData: [],
        unitData: [],
        unitList: [],
        supplierData: [],
        supplierList: [],
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },
        confirmLoading: false,
        validatorRules: {
          name: [{
            required: true,
            message: '招采名称不能为空',
            trigger: 'blur'
          }],
        },
        url: {
          add: '/bidding/wtPublicBidding/add',
          edit: '/test/jeecgOrderMain/edit',
          orderCustomerList: '/test/jeecgOrderMain/queryOrderCustomerListByMainId',
          orderTicketList: '/test/jeecgOrderMain/queryOrderTicketListByMainId',
          list: '/bidding/wtMaterialsSupplierPrice/list',
        },
        dictOptions: {},
        superFieldList: [],
        queryParam: {
          type: '0'
        },
        columns: [{
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            },
          },
          {
            title: 'id',
            align: 'center',
            dataIndex: 'id',
          },
          {
            title: '名称',
            align: 'center',
            dataIndex: 'name',
          },

          {
            title: '联系人',
            align: 'center',
            dataIndex: 'relation',
          },
          {
            title: '电话',
            align: 'center',
            dataIndex: 'phone',
          },
          {
            title: '地址',
            align: 'center',
            dataIndex: 'address',
          },
          {
            title: '评分',
            align: 'center',
            dataIndex: 'score',
          },
        ],
      }
    },
    created() {},
    methods: {
      initDictConfig() {},
      getSuperFieldList() {
        let fieldList = []
        fieldList.push({
          type: 'string',
          value: 'name',
          text: '名称',
          dictCode: ''
        })
        fieldList.push({
          type: 'int',
          value: 'type',
          text: '0经营产品1施工',
          dictCode: ''
        })
        fieldList.push({
          type: 'string',
          value: 'relation',
          text: '联系人',
          dictCode: ''
        })
        fieldList.push({
          type: 'string',
          value: 'phone',
          text: '电话',
          dictCode: ''
        })
        fieldList.push({
          type: 'string',
          value: 'address',
          text: '地址',
          dictCode: ''
        })
        fieldList.push({
          type: 'string',
          value: 'score',
          text: '评分',
          dictCode: ''
        })
        this.superFieldList = fieldList
      },

      changeLevelOne(val) {
        this.clearForm()
        this.model.biddingMaterialsList.categoryTwoId = this.model.biddingMaterialsList.categoryThreeId = ''
        this.levelThreeOptions = []
        this.OneVal = val

        // console.log('changeLevelOne:', this.treeData)
        const item = this.treeData.find((v) => v.id === val)
        this.levelTwoOptions = (item.children || []).map((v) => {
          return {
            ...v,
            value: v.id,
            label: v.name,
          }
        })
        this.getList(
          'categoryOneId',
          this.model.biddingMaterialsList.categoryOneId,
          this.model.biddingMaterialsList.model,
          this.model.biddingMaterialsList.unit
        )
      },
      changeLevelTwo(val) {
        // console.log('点击：', val)
        //  this.clearForm()
        // console.log('fdse',this.OneVal);
        this.model.biddingMaterialsList.categoryThreeId = ''
        if (this.treeData) {
          const levelOneItem = this.treeData.find((v) => v.id === this.OneVal)
          // console.log('levelOneItem:', levelOneItem)
          // console.log('categoryOneId:', this.model.biddingMaterialsList.categoryOneId)
          // console.log('categoryTwoId:', this.model.biddingMaterialsList.categoryTwoId)
          // console.log('treeData3:', this.treeData)
          // console.log('levelOneItem.children:', levelOneItem.children)
          // console.log('categoryTwoId:', this.model.biddingMaterialsList)
          // console.log('categoryTwoId:', this.model.biddingMaterialsList.categoryTwoId)
          const levelTwoItem = levelOneItem.children.find((v) => v.id === val) || []
          // console.log('levelTwoItem:', levelTwoItem)
          this.levelThreeOptions = (levelTwoItem.children || []).map((v) => {
            return {
              ...v,
              value: v.id,
              label: v.name,
            }
          })
          // console.log('levelThreeOptions:', this.levelThreeOptions)
          this.getList('categoryTwoId', val, this.model.biddingMaterialsList.unit)
        }
      },
      changeLevelThree(val) {
        this.clearForm()
        this.getList('categoryThreeId', val)
      },
      getList(category, id) {
        this.clearForm()
        getAction(`/wtSupplier/getListByCategory?${category}=${id}`).then((res) => {
          if (res.success) {
            this.supplierData = []
            let supplierList1 = res.result
            for (let a = 0; a < supplierList1.length; a++) {
              let temp = supplierList1[a]
              temp.isLeaf = temp.leaf
              this.supplierData.push(temp)
            }
            this.supplierList = [...this.supplierData].map((v) => {
              return {
                ...v,
                value: v.id,
                label: v.name,
              }
            })
          }
        })
        getAction(`/product/wtPlatformProduct/getListByCategory?${category}=${id}`).then((res) => {
          if (res.success) {
            this.StandardData = []
            let StandardList1 = res.result

            for (let a = 0; a < StandardList1.length; a++) {
              let temp = StandardList1[a]
              temp.isLeaf = temp.leaf
              this.StandardData.push(temp)
            }
            this.StandardList = [...this.StandardData].map((v) => {
              return {
                ...v,
                value: v.id,
                label: v.name,
              }
            })
          }
        })
      },
      clearForm() {
        this.model.biddingMaterialsList.model = ''
        this.model.biddingMaterialsList.unit = ''
        this.model.biddingMaterialsList.platformProductId = ''
        this.model.biddingMaterialsList.supplierId = ''
        ''
      },
      loadTree() {
        var that = this
        getAction('/wtCategory/list').then((res) => {
          if (res.success) {
            // console.log(res)
            that.treeData = []
            var treeList = res.result
            if (treeList.length > 0) {
              for (var a = 0; a < treeList.length; a++) {
                var temp = treeList[a]
                temp.isLeaf = temp.leaf
                that.treeData.push(temp)
              }
              that.levelOneOptions = [...treeList].map((v) => {
                return {
                  ...v,
                  value: v.id,
                  label: v.name,
                }
              })
              if (that.levelOneOptions.length > 0 && that.model.biddingMaterialsList.categoryOneId !== '') {
                var list = that.levelOneOptions.filter((item) => {
                  return item.id === that.model.biddingMaterialsList.categoryOneId
                })

                var data = list[0].children
                that.levelTwoOptions = [...data].map((v) => {
                  return {
                    ...v,
                    value: v.id,
                    label: v.name,
                  }
                })
                var list2 = that.levelTwoOptions.filter((item) => {
                  return item.id === that.model.biddingMaterialsList.categoryTwoId
                })
                // console.log('fdds', list2)
                var data2 = list2[0].children
                that.levelThreeOptions = [...data2].map((v) => {
                  // console.log('fewe', v)
                  return {
                    ...v,
                    value: v.id,
                    label: v.name,
                  }
                })
              }
            }
            this.getList('categoryThreeId', that.model.biddingMaterialsList.categoryThreeId)
          }
        })
        getAction(`/sys/sysDepart/getDepartByOrgType?orgType=1`).then((res) => {
          if (res.success) {
            // console.log(res)
            that.treeData1 = []
            let treeList1 = res.result
            for (let a = 0; a < treeList1.length; a++) {
              let temp = treeList1[a]
              temp.isLeaf = temp.leaf
              that.treeData1.push(temp)
            }
            that.levelOneOptions1 = [...that.treeData1].map((v) => {
              return {
                ...v,
                value: v.id,
                label: v.departName,
              }
            })

          }
        })
      },
      handleCheckedCitiesChange(id, index) {
        this.StandardList.forEach((item) => {
          if (item.id === id) {
            this.modelList = item.model.split(',').map((v) => ({
              value: v,
              label: v
            }))
            this.model.biddingMaterialsList[index].unit = item.unit
          }
        })
      },
      add() {
        this.edit({})
      },
      edit(record) {
        this.model = Object.assign({
            biddingMaterialsList: [{}],
          },
          record
        )
        this.loadTree()
        this.visible = true
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleOk() {
        const that = this
        // 触发表单验证
        this.$refs.form.validate((valid) => {
          if (valid) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            var models = this.model
            this.imageUrl = getFileAccessHttpUrl(this.technicalRequirements)
            models.technicalRequirements = this.imageUrl
            // console.log('656', this.model)
            httpAction(httpurl, this.model, method)
              .then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                that.confirmLoading = false
                that.close()
              })
          }
        })
      },
      submitForm() {
        const that = this
        // 触发表单验证
        this.$refs.form.validate((valid) => {
          if (valid) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            httpAction(httpurl, this.model, method)
              .then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                that.confirmLoading = false
              })
          }
        })
      },
      handleCancel() {
        this.close()
      },
      addRcruit() {
        this.model.biddingMaterialsList.push({})

        this.$forceUpdate()
      },
      delRcruit(index) {
        this.model.biddingMaterialsList.splice(index, 1)
        this.$forceUpdate()
        this.model.biddingMaterialsList.model = '';
        this.model.biddingMaterialsList.num = '';
        this.model.biddingMaterialsList.unit = '';
        this.model.categoryOneId = '';
        this.model.categoryTwoId = '';
        this.model.categoryThreeId = '';
        this.model.biddingMaterialsList.platformProductName = '';
      },
    },
  }
</script>
<style scoped>
  .ant-btn {
    padding: 0 10px;
    margin-left: 3px;
  }

  .ant-form-item-control {
    line-height: 0px;
  }

  /** 主表单行间距 */
  .ant-form .ant-form-item {
    margin-bottom: 10px;
  }

  /** Tab页面行间距 */
  .ant-tabs-content .ant-form-item {
    margin-bottom: 0px;
  }
</style>